import React, { Component } from 'react'
import {
  Form,
  Input,
  Select
} from 'antd'
import PropTypes from 'prop-types'

/**
 * 添加分类组件
 */

  const Option = Select.Option
  const Item = Form.Item

class AddForm extends Component {
  
  static propTypes = {
    categorys: PropTypes.array.isRequired,
    parentId: PropTypes.string.isRequired,
    setForm: PropTypes.func.isRequired
  }

  UNSAFE_componentWillMount() {
    this.props.setForm(this.props.form)
  }

  render() {
    const {categorys,parentId} = this.props
    const { getFieldDecorator } = this.props.form
    return (
      <Form>
        <Item>
          {
            getFieldDecorator('parentId', {
              initialValue: parentId
            })(
              <Select>
                <Option value='4'>一级分类</Option>
                {
                  categorys.map(c => <Option key={c._id} value={c._id}>{c.name}</Option> )
                }
              </Select>
            )
          }
        </Item>
        <Item>
          {
            getFieldDecorator('categoryName', {
              initialValue: '',
              rules: [
                {required: true, message: '分类名称不能为空！'}
              ]
            })(
              <Input placeholder="请输入分类名称"></Input>
            )
          }
          </Item>
      </Form>
    )
  }
}

export default Form.create()(AddForm)
